<template>
  <div class="upload-container">
    <el-upload
      :data="appendParams"
      :multiple="multiple"
      :show-file-list="false"
      list-type="picture"
      :on-success="handleSuccess"
      :drag="drag"
      :accept="acceptData"
      :action="action"
      :http-request="onUpload"
      :before-upload="beforeUpload"
      :class="uploaderClass"
    >
      <div
        slot="tip"
        class="el-upload__tip"
      >
        <slot name="tips">
          <div v-if="tips">
            {{ tips }}
          </div>
        </slot>
      </div>
      <div
        v-if="drag"
        class="d-flex flex-column"
      >
        <img
          v-if="fileData"
          :src="fileData.url"
        >
        <template v-else>
          <i class="el-icon-upload" />
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </template>
      </div>
      <div
        v-else
        class="upload-square"
      >
        <div class="upload-square__inner">
          <img
            v-if="fileData && fileData.url"
            :src="fileData.url"
          >
          <i
            v-else
            class="el-icon-plus avatar-uploader-icon"
          />
        </div>
        <div
          v-if="fileData && fileData.url && showRemove"
          class="upload-square__handler"
        >
          <i class="upload-square__handler-status el-icon-check" />
          <i
            class="upload-square__handler-delete el-icon-delete"
            @click.stop="handleRemove"
          />
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import upload from '../mixins/upload'
export default {
  name: 'SingleImageUpload',
  mixins: [upload],
  computed: {
    uploaderClass() {
      var classes = ['image-uploader']
      if (this.ratio && !this.drag) {
        classes.push('uploader-ratio-box')
      }
      return classes
    }
  },
  created() {
    if (this.drag) {
      document.body.ondrop = function(event) {
        event.preventDefault()
        event.stopPropagation()
      }
    }
  }
}
</script>

<style lang="scss">
@import '~@/styles/mixin.scss';
:root {
  --ratio-percent: 100%;
  --ratio-width: 80px;
}
</style>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.upload-container {
  .image-uploader {
    ::v-deep .el-upload__tip {
      margin-top: 0;
    }
    &.uploader-ratio-box {
      ::v-deep .el-upload {
        overflow: hidden;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        padding: 3px;
        line-height: 1;
      }
    }
  }
}
.upload-container {
  width: 100%;
  position: relative;
  @include clearfix;
  .image-uploader {
    max-width: 375px;
    font-size: 0;
    &.uploader-ratio-box {
      .upload-square {
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        width: var(--ratio-width);
        &::after {
          content: '';
          padding-top: var(--ratio-percent);
          display: block;
        }
        &__inner {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: inherit;
          }
        }
        &__handler {
          position: absolute;
          right: 0;
          top: 0;
          line-height: inherit;
          text-align: center;
          z-index: 20;
          display: block;
          padding: 3px;
          &::after {
            position: absolute;
            right: 0;
            top: 0;
            width: 46px;
            height: 26px;
            transform: translate(15px, -13px) rotate(45deg);
            content: '';
            display: block;
            background: #13ce66;
            z-index: -1;
          }
          &-delete {
            display: none;
          }
          &-status {
            color: #fff;
            font-size: 12px;
          }
        }
        &:hover {
          .upload-square__handler::after {
            display: none;
          }
          .upload-square__handler-status {
            display: none;
          }
          .upload-square__handler-delete {
            display: block;
          }
        }
      }
    }
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    width: auto;
    height: 100%;
    display: block;
  }
  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
      .el-icon-delete {
        font-size: 36px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
}
</style>
